<template>
	<view class="my">
		<view class="box box-flex-between" v-if="userInfo">
			<view class="box-flex-start my-user-box">
				<image :src="$util.showImage(userInfo.userPhoto)" mode="aspectFill" v-if="userInfo.userPhoto"></image>
				<image src="@/static/images/default_user.jpg" mode="aspectFill" v-else></image>
				<view>
					<view class="name"><text>{{userInfo.nikename}}</text></view>
					<view><text>账号：{{userInfo.username}}</text></view>
				</view>
			</view>
			<view class="box-flex-column box-flex-start" @click="toSetting">
				<uni-icons type="gear" size="24" color="$uni-base-color"></uni-icons>
				<text style="font-size: 12px;">设置</text>
			</view>
		</view>
		<view class="box box-flex-between" v-else @click="toLogin">
			<view class="box-flex-start my-user-box">
				<image src="@/static/images/default_user.jpg" mode="aspectFill"></image>
				<view class="name">登录/注册</view>
			</view>
		</view>
		<view class="box box-flex-around">
			<view class="grid-item-box">
				<uni-badge :text="count.message" absolute="rightTop" :offset="[6, 6]" size="small">
					<uni-icons type="chat-filled" :size="40"></uni-icons>
				</uni-badge>
				<text class="text">消息</text>
			</view>
			<view class="grid-item-box">
				<uni-icons type="star-filled" :size="40"></uni-icons>
				<text class="text">收藏</text>
			</view>
			<view class="grid-item-box">
				<uni-badge :text="count.order" absolute="rightTop" :offset="[6, 6]" size="small">
					<uni-icons type="wallet-filled" :size="40"></uni-icons>
				</uni-badge>
				<text class="text">订单</text>
			</view>
			<view class="grid-item-box">
				<uni-icons type="gift-filled" :size="40"></uni-icons>
				<text class="text">优惠</text>
			</view>
		</view>
		<view class="box box-card">
			<view class="box-flex-between card-header">
				<text>我是标题</text>
				<view>
					<text>全部</text>
					<uni-icons type="forward" color="$uni-main-color"></uni-icons>
				</view>
			</view>
			<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</view>
		<view class="box box-card">
			<view class="box-flex-between card-header">
				<text>我是标题</text>
				<view>
					<text>全部</text>
					<uni-icons type="forward" color="$uni-main-color"></uni-icons>
				</view>
			</view>
			<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</view>
		<view class="box box-card">
			<view class="box-flex-between card-header">
				<text>我是标题</text>
				<view>
					<text>全部</text>
					<uni-icons type="forward" color="$uni-main-color"></uni-icons>
				</view>
			</view>
			<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</view>
		<view class="box box-card">
			<view class="box-flex-between card-header">
				<text>我是标题</text>
				<view>
					<text>全部</text>
					<uni-icons type="forward" color="$uni-main-color"></uni-icons>
				</view>
			</view>
			<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</view>
		<view style="height: 1px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				count: {
					message: 0,
					order: 0
				}
			}
		},
		onLoad() {
			if (this.$util.checkLogin()) {
				this.$api.post('/appUser/getUserInfo').then(res => {
					getApp().globalData.userInfo = res.data;
					this.userInfo = res.data;
					this.initMyInfo();
				})
			}
		},
		onShow() {
			if (this.userInfo) {
				this.initMyInfo();
			} else {
				this.initEmptyPage();
			}
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '/pagesMy/setting/setting'
				})
			},
			initEmptyPage() {
				this.count = {
					message: 0,
					order: 0
				}
			},
			initMyInfo() {
				this.count = {
					message: 120,
					order: 23
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		.my-user-box {
			image {
				width: 70px;
				height: 70px;
				border-radius: 35px;
				margin-right: 15px;
				border: 2px solid $uni-border-color;
			}

			.name {
				font-weight: 600;
				font-size: 16px;
				color: $uni-main-color;
				margin-bottom: 5px;
			}
		}
	}
</style>
